<template>
  <DatePicker style="width: 200px;" type="date"
              @on-change="onChangeBegin"
              :value="startTime"
              :options="beginOptions"
              show-week-numbers
              :format="format"
              placement="bottom-start" :editable="false"
              :clearable="clearable"
              :disabled="disabled"
              placeholder="请选择时间"/>
</template>

<script>
  /**
   * @onlySelectDay 只允许选中周X
   * @selectDay X 的具体数值 0: 周天, 1-6 周一到周天
   * @showShortcuts 是否显示快捷方式
   */
  export default {
    name: "cus-datePick",
    props: {
      startTime: {
        type: [String, Date],
        default: ''
      },
      // 新增格式转换
      format: {
        type: String,
        default: 'yyyy-MM-dd HH:mm:ss'
      },
      clearable: {
        type: Boolean,
        default: true,
      },
      showShortcuts: {
        type: Boolean,
        default: true,
      },
      onlySelectDay: {
        type: Boolean,
        default: false,
      },
      selectDay: {
        type: Number,
        default: 1
      },
      disabled: {
        type: Boolean,
        default:  false,
      },
    },
    mounted() {
      this.$emit('update:startTime', this.startTime)
    },
    computed: {
      beginOptions() {
        let onlySelectDay = this.onlySelectDay;
        let selectDay = this.selectDay;
        let shortcuts = this.showShortcuts ? [
          {
            text: '今天',
            value() {
              return new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
            }
          },
          {
            text: '昨天',
            value() {
              const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              return date
            }
          },
          {
            text: '一周前',
            value() {
              const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              return date
            }
          },
          {
            text: '一月前',
            value() {
              const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
              return date
            }
          },
          {
            text: '三月前',
            value() {
              const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 90)
              return date
            }
          }
        ] : []
        return {
          disabledDate(date) {
            if (onlySelectDay) {
              return date && !(date.getDay() === selectDay)
            } else return false
          },
          shortcuts: shortcuts
        }
      },
    },
    methods: {
      onChangeBegin(date) {
        this.$emit('update:startTime', date)
        this.$emit('onChange', date);
      },
    }
  }
</script>

<style scoped>

</style>
